<template>
  <div class="other-page">
    <div class="router-content">
      <div v-if="pageType == 'list'">
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="index" label="序号" width="50">
            <template slot-scope="scope">{{
              10 > scope.$index + 1
                ? "0" + (scope.$index + 1)
                : scope.$index + 1
            }}</template>
          </el-table-column>
          <el-table-column prop="moduleName" label="模块名称"></el-table-column>
          <el-table-column prop="imageUrl" label="背景图">
            <template slot-scope="scope">
              <img
                v-if="scope.row.carouselFile"
                style="width: 72px; height: 40px"
                :src="scope.row.carouselFile"
                alt
              />
              <img
                v-else
                src="@/assets/noImg.jpg"
                style="width: 72px; height: 40px"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column prop="carouselUrl" label="链接"></el-table-column>
          <el-table-column label="操作" :width="188">
            <template slot-scope="scope">
              <el-tag
                @click="handleOptions({ key: '1', index: scope.$index })"
                size="medium"
                style="margin: 0 5px 0 0; cursor: pointer"
                >详情</el-tag
              >
              <el-tag
                v-if="scope.row.state != 2 && edit"
                @click="handleOptions({ key: '2', index: scope.$index })"
                size="medium"
                style="margin: 0 5px 0 0; cursor: pointer"
                >编辑</el-tag
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 50px"
          @current-change="handlePageChange"
          :current-page="pageParams.pageNum"
          :page-sizes="[pageParams.pageSize]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </div>
      <div v-else>
        <div v-if="pageType == 'edit' || pageType == 'details'">
          <el-form
            label-width="120px"
            :model="formModel"
            :rules="formRules"
            ref="formModel"
            style="width: 80%; margin: 32px auto"
          >
            <el-form-item label="名称">
              {{ currentRow.moduleName }}
            </el-form-item>
            <el-form-item label="背景图" prop="carouselFile">
              <el-upload
                accept=".png, .jpeg, .jpg, .gif"
                action
                :disabled="pageType == 'details'"
                :http-request="uploadOss"
                :show-file-list="false"
                :before-upload="handleBeforeUpload"
              >
                <div v-if="formModel.carouselFile">
                  <img :src="formModel.carouselFile" class="avatar" />
                </div>
                <div v-else class="notImg">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                  <span>上传封面图</span>
                </div>
              </el-upload>
              <p style="color: #666">
                仅支持png、jpg、gif、jpeg格式，不超过2m（建议尺寸 1920px *
                320px)
              </p>
            </el-form-item>
            <el-form-item label="链接" prop="carouselUrl">
              <el-input
                :disabled="pageType == 'details'"
                maxlength="128"
                v-model="formModel.carouselUrl"
                placeholder="请输入背景图地址"
              ></el-input>
            </el-form-item>
            <el-form-item label>
              <el-button
                v-if="pageType != 'details'"
                type="primary"
                @click="submitForm('formModel')"
                :loading="$store.state.subLoading"
                >提交</el-button
              >
              <el-button
                v-if="pageType != 'details'"
                @click="closeForm('formModel')"
                >取消</el-button
              >
              <el-button
                v-if="pageType == 'details'"
                type="primary"
                @click="pageType = 'list'"
                :loading="$store.state.subLoading"
                >返回</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from "@/api/modules/bgcSet/other.js";
import setToken from "@/utils/auth";
export default {
  name: "Other",
  data() {
    return {
      edit: true, //按钮权限

      pageType: "list",
      visible: false,
      queryBar: {},
      currentRow: "",
      tableData: [],
      count: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10,
      },

      //
      detailsData: "",
      formModel: {
        carouselName: "",
        carouselFile: "",
        carouselUrl: "",
      },
      formRules: {
        carouselFile: [
          { required: true, message: "请上传封面", trigger: "blur" },
        ],
        carouselUrl: [{ message: "请输入背景图地址", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 设置页面按钮权限
      let btns = this.$store.state.userInfo.list[5].children[1];
      this.edit = btns.children[0].havePermission;

      this.getData(this.pageParams);
    });
  },
  methods: {
    getData(params) {
      try {
        api
          .getOtherCarouselPage(params ? params : this.pageParams)
          .then((res) => {
            this.tableData = res.data;
            this.count = +res.count;
            this.pageType = "list";
          });
      } catch (error) {}
      this.visible = false;
    },
    handlePageChange(val) {
      this.pageParams.pageNum = val;
      this.getData();
    },
    handleOptions(val) {
      const { key, index } = val;
      this.currentRow = this.tableData[index];
      switch (key) {
        case "1":
          Object.keys(this.formModel).forEach((item) => {
            this.formModel[item] = this.currentRow[item];
          });
          this.pageType = "details";
          break;
        case "2":
          Object.keys(this.formModel).forEach((item) => {
            this.formModel[item] = this.currentRow[item];
          });
          this.pageType = "edit";
          break;
        case "4":
          this.visible = true;
          break;
      }
    },
    handleCancel() {
      this.visible = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$store.commit("setSubLoading", true);
          api
            .modifyOtherCarousel({
              ...this.formModel,
              ...{
                carouselId: this.currentRow.carouselId,
              },
            })
            .then((res) => {
              this.$message.success("修改成功");
              this.getData();
            });
        } else {
          return false;
        }
      });
    },
    closeForm(formName) {
      this.$refs[formName].resetFields();
      this.pageType = "list";
    },
    handleBeforeUpload(file) {
      if (file.type.split("/")[0] != "image") {
        this.$message.error("请上传图片格式文件");
        return false;
      }
      if (file.size > 2097152) {
        this.$message.error("上传图片大小不能超出2M");
        return false;
      }
    },
    uploadOss(file) {
      let formData = new FormData();
      let token = setToken.getToken();
      formData.append("file", file.file, file.file.name);
      this.$http({
        method: "post",
        url: "/api/upload",
        data: formData,
        headers: { Authorization: "Bearer " + token },
      })
        .then((res) => {
          this.formModel.carouselFile = res.data.data;
          this.$refs["formModel"].validateField("carouselFile");
        })
        .catch((error) => {
          this.$message.error("系统错误");
        });
    },
  },
};
</script>
s
<style lang="less" >
.other-page {
  .el-upload,
  .el-upload--picture-card {
    width: 104px;
    height: 104px;
    line-height: 60px;
    box-sizing: border-box;
    border: 1px dashed #666;
    border-radius: 5px;
    overflow: hidden;
    img {
      width: 104px;
      height: 104px;
    }
  }
  .hasImg,
  .notImg {
    width: 102px;
    height: 102px;
    background-color: #f0f2f5;

    position: relative;
  }
  .notImg {
    padding-top: 35px;
    box-sizing: border-box;
    i {
      display: block;
      font-size: 16px;
      line-height: 10px;
    }
    span {
      display: block;
    }
  }
}
</style>
